<template>
  <div class="holidaySetting">
    <a-card class="general-card">
      <a-calendar>
        <template #header="{ onMonthChange }">
          <div>
            <a-icon @click="onMonthChange(specificTime.getMonth() - 1)">上一个月</a-icon>
            {{ specificTime.getFullYear() }}年{{ specificTime.getMonth() + 1 }}月{{ specificTime.getDate() }}日
            <a-icon @click="onMonthChange(specificTime.getMonth() + 1)">下一个月</a-icon>
          </div>
        </template>
        <template #default="{ year, month, date }">
          <div
            :style="{ color: specificTime.getMonth() + 1 != month ? '#c0c4cc' : 'unset' }"
            class="holidaySetting-date"
            @click="getDate(year, month, date)"
            @contextmenu.prevent="onRightClick(year, month, date)"
            @change="getddd"
          >
            <a-row>
              <a-col :span="12">
                <a-space direction="vertical" :size="20">
                  <div>{{ date }}</div>
                  <div>{{ solarDate2lunar(year, month, date) }}</div>
                </a-space>
              </a-col>
              <a-col :span="12">
                <a-tag v-if="holidayList.indexOf(year + '-' + month + '-' + date) == -1" size="large" color="#168cff">班</a-tag>
                <a-tag v-else size="large" color="#7bc616">修</a-tag>
              </a-col>
            </a-row>
          </div>
        </template>
      </a-calendar>
    </a-card>
    <a-modal v-model:visible="editVisible" title="节假日设置" @ok="handleOk" @cancel="handleCancel">
      <a-form ref="formRef" :model="form">
        <a-form-item field="date" label="日期">
          <a-input v-model="form.date" disabled />
        </a-form-item>
        <a-form-item field="work" label="类型" required>
          <a-radio-group v-model="form.work">
            <a-radio value="work">班</a-radio>
            <a-radio value="rest">修</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './holidaySettings.ts';

export default {
  name: 'HolidaySettings',
  setup() {
    const { base, specificTime, init, isFestival, solarDate2lunar, getDate, onRightClick, handleOk, handleCancel, getddd } = importConfig();
    init();
    return {
      ...toRefs(base),
      specificTime,
      init,
      isFestival,
      solarDate2lunar,
      getDate,
      onRightClick,
      handleOk,
      handleCancel,
      getddd,
    };
  },
};
</script>

<style scoped lang="less">
.holidaySetting {
  &-date {
    padding: 10px 0;
    height: 100%;
  }
}
</style>
